import { useEffect } from "react";

export default function ChartContextMenu({ position, data, onClose }) {
    useEffect(() => {
      if (data) {
        console.log("menu",data,position);

      }
      return () => {
        console.log("menu close");
      };
    }, [data,position]);

  return (
    <div
      style={{
        position: 'absolute',
        left: position.x,
        top: position.y,
        backgroundColor: '#1a2630', // 调整背景颜色为更深的深蓝色
        boxShadow: '0 4px 16px rgba(0,0,0,0.4)', // 增加深色阴影，提升立体感
        borderRadius: 12, // 增大圆角，使其更圆润
        padding: '16px 0', // 增加上下内边距，优化视觉间距
        zIndex: 1000
      }}
    >
      <div
        className="menu-item"
        style={{
          padding: '12px 18px',
          color: '#ffffff',
          cursor: 'pointer',
          transition: 'background-color 0.3s, box-shadow 0.3s', // 增加 box-shadow 过渡
          fontSize: '16px',
          fontWeight: 'bold',
          margin: '4px 0',
          ':hover': {
            backgroundColor: '#303e4d',
            boxShadow: '0 2px 8px rgba(0,0,0,0.3)', // 增加悬停时的阴影效果
            transform: 'scale(1.02)' // 轻微放大效果，增强交互感
          }
        }}
        onClick={() => {
          console.log('查看详情:', data);
          onClose(1);
        }}
      >
        查看公司详情
      </div>
      <div
        className="menu-item"
        style={{
          padding: '12px 18px',
          color: '#ffffff',
          cursor: 'pointer',
          transition: 'background-color 0.3s, box-shadow 0.3s', // 增加 box-shadow 过渡
          fontSize: '16px',
          fontWeight: 'bold',
          margin: '4px 0',
          ':hover': {
            backgroundColor: '#303e4d',
            boxShadow: '0 2px 8px rgba(0,0,0,0.3)', // 增加悬停时的阴影效果
            transform: 'scale(1.02)' // 轻微放大效果，增强交互感
          }
        }}
        onClick={() => {
          console.log('展开/折叠:', data);
          onClose(2);
        }}
      >
        其他操作
      </div>
    </div>
  );
}